<template>
  <div class="title">
  <span class="titleName">智能巡查平台</span>
 <div  style="position: relative;margin-left:101px"><p class="titleName-Bo">巡查学校食堂累计数</p> <span class="t_num3"></span></div>
  </div>
</template>

<script>
  import $ from "jquery";
  import "../../../static/js/digitalScroll.js";
  import {PatrolPlatform} from "../../request/api"
  export default {
    props:['showNew'],
    data() {
      return {
        titleNum:0,
        set3:''
      };
    },
    methods:{
      JHall(a){
        
        let that = this;
        // $(function() {
          if (a == 1){
            var sum1 = 0
          }else{
            var sum1 = this.titleNum;
          }
        	show_num1(sum1);
        	that.set3 = setInterval(function() {
        		show_num1(sum1);
        	}, 1000);
        // });

        function show_num1(n) {
        	if (sum1 <= 58568) {
            // sum1 = sum1 +  Math.ceil(Math.random()*9);
            sum1 = sum1 + parseInt(parseInt(Math.random()*(390-290+1)+290,10)/5);
            var it = $(".t_num3 i");
            var len = String(n).length;
            for (let i = 0; i < len; i++) {
            	if (it.length <= i) {
            		$(".t_num3").append("<i></i>");
            	}
            	var num1 = String(n).charAt(i);
            	//根据数字图片的高度设置相应的值
            	var y = -parseInt(num1) * 60;
            	var obj = $(".t_num3 i").eq(i);
            	obj.animate(
            		{
            			backgroundPosition:
            				"(0 " + String(y) + "px)"
            		},
            		"slow",
            		"swing",
            		function() {}
            	);
            }

        	} else {
            sum1 = 58568;
            console.log(sum1)
            // sum1 = sum1 +  Math.ceil(Math.random()*9);
            // sum1 = sum1 + parseInt(Math.random()*(350-290+1)+290,10);
            var it = $(".t_num3 i");
            var len = String(sum1).length;
            for (let i = 0; i < len; i++) {
            	if (it.length <= i) {
            		$(".t_num3").append("<i></i>");
            	}
            	var num1 = String(sum1).charAt(i);
            	//根据数字图片的高度设置相应的值
            	var y = -parseInt(num1) * 60;
            	var obj = $(".t_num3 i").eq(i);
            	obj.animate(
            		{
            			backgroundPosition:
            				"(0 " + String(y) + "px)"
            		},
            		"slow",
            		"swing",
            		function() {}
            	);
            }
        		clearInterval(that.set3);
             // sum1 = 58568;
            // that.titleNum = 58568;
        	}
        }
      },
      GetPatrolPlatform(){
        PatrolPlatform({
            code:'all',
            AppId:this.$getParams('appid'),
            EBCOrganizationId:'',
            UserId:this.$getParams('userid')
        }).then((res)=>{
           res.SCater.Data.PatrolPlatform_A.forEach((res)=>{
              if(res.StatType == "全部商家数"){
                clearInterval(this.set3)
                this.titleNum = 0;
                this.titleNum = res.Num
                // this.JHall()
              }
             })
           })
        }
      },
    created() {
      // this.GetPatrolPlatform()
      // this.JHall()
    },
    mounted(){
      this.GetPatrolPlatform()
      this.JHall('1')
    },
    watch:{
      showNew(e){
        console.log(e)
        if(e){
          this.titleNum = 53;
          this.JHall()
        }
        
      }
    }
  };
</script>

<style>
  .titleName-Bo{
    position: absolute;
    left: -140px;
  }

  .title{
    width:669px;
    height: 106px;
    margin:0 auto;
    background: url(../../assets/img/titlebag.png) no-repeat;
  }
  .title .titleName{
    color: hsla(172, 100%, 50%, 1);
    font-size: 44px;
    text-align: center;
    display: block;
    font-style: italic;
    font-weight: bold;
    padding-top: 20px;
  }
  .title .titleName a{
    top: 10px;
    width: 200px;
    height: 55px;
    background-color: #00FFDE;
    display: inline-block;
    color: #0A2C4D;
    font-style: normal !important;
    line-height: 55px;
    font-weight: bold;
    -webkit-transform: skew(-20deg);
    -moz-transform:skew(-20deg)
  }
  .title p{
    display: inline-block;
    font-size:40px;
    color:hsla(195, 100%, 50%, 1);
    padding-top:80px;
  }
  .t_num3 {
    display: inline-block;
    position: absolute;
    top: 70px;
    left: 264px;
    width: 467px;
  }
  .t_num3 i {
  	width: 55px;
  	height: 60px;
  	margin-right: 10px;
  	display: inline-block;
  	background: url("../../assets/img/img3.png") no-repeat;
  	background-position: 0 0;
  }
</style>
